<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet"
          href="./bootstrap-3.3.7-dist/css/bootstrap.min.css">

    <script src="./bootstrap-3.3.7-dist/js/jquery-3.1.1.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="./bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <script src="./layui/layui.all.js"></script>
    <script src="./js/common.js"></script>
    <script src="https://code.angularjs.org/1.4.0-rc.1/angular.js"></script>
    <style type="text/css">
        body {
            background: url(img/main.jpg);
            background-size: 100% 100%;
            background-repeat: no-repeat;
        }

        .content {
            margin: 0 auto;
            margin-top: 120px;
            padding: 20px;
            width: 500px;
            height: 550px;
            background: #d0d0d0;
            border-radius: 4px;
            box-shadow: 0 2px 6px rgba(0, 0, 0, .04);
            background-color: rgba(255, 255, 255, 0.3)
        }

        #book {
            margin-top: 20px;
            margin-bottom: 20px;
        }
    </style>
</head>

<body>


<div class="alert alert-info" role="alert">
    <p id="mainhead"></p>
</div>
<button class="btn  btn-success" type="submit" style="margin-left: 47%;" onclick="window.location.href='/main.html'">
    回到首页
</button>
<div class="content">
    <form class="ticketform">
        <input type="hidden" id = "name" name="name" value="lhjun" required>
        <div class="form-group">
            <label>姓名</label><input type="text" class="form-control"
                                    maxlength="10"
                                    id = "bookname"
                                    name="bookname" placeholder="姓名" required>
        </div>
        <label>性别</label>
        <div class="radio">
            <label> <input type="radio" name="booksex"
                           id="optionsRadios1" value="男" checked required> 男
            </label>
        </div>
        <div class="radio">
            <label> <input type="radio" name="booksex"
                           id="optionsRadios2" value="女" required>女
            </label>
        </div>

        <div class="form-group">
            <label>始发城市</label> <input type="text" class="form-control"
                                       id="startcity"
                                       maxlength="8"
                                       placeholder="始发城市" name="startcity" required>
        </div>

        <div class="form-group">
            <label>目的城市</label> <input type="text" class="form-control"
                                       id="endcity"
                                       maxlength="8"
                                       name="endcity" placeholder="目的城市" required>
        </div>

        <div class="form-group">
            <label>出发日期</label> <input type="date" class="form-control"
                                       id="startdate"
                                       name="startdate" placeholder="出发日期" required>
        </div>

        <div class="form-group">
            <label>身份证</label> <input type="text" class="form-control"
                                      id="idcard" maxlength="18" name="idcard" placeholder="身份证" required>
        </div>
        <button type="reset" class="btn btn-warning"
                style="margin-left: 40px;  float:left;">重&nbsp;&nbsp;&nbsp;&nbsp;置
        </button>
    </form>

    <button id="subbutton" class="btn btn-success"
            style="margin-left: 140px; float:left;">预&nbsp;&nbsp;&nbsp;&nbsp;订
    </button>

</body>
<script type="text/javascript">
    var layer = layui.layer;
    $(document).ready(function () {
        checklogin();
    })

    $('#subbutton').click(function (e) {
        var bookname = $('#bookname').val();
        var sex = $("input[name='booksex']:checked").val();
        var startcity = $('#startcity').val();
        var endcity = $('#endcity').val();
        var startdate = $('#startdate').val();
        var idcard = $('#idcard').val();

        var Regx = /^[0-9]*$/;
        if (!Regx.test(idcard)) {
            layer.msg("身份证必须为18位数字")
            return;
        }
        if(idcard.length != 18){
            layer.msg("身份证必须为18位数字")
            return;
        }
        $.ajax({
            url: '/ticket/create',
            method: 'POST',
            dataType: "json",
            traditional: true,
            data: $(".ticketform").serialize(),
            success: function (data) {
                if (data.status == 'ok') {
                    layer.msg(data.msg);
                    window.location.href = '/listTicket.html';
                } else {
                    layer.msg(data.msg);
                }
            },
            error: function (data) {

            }
        });
    })

</script>
</html>
